<template>
	<view class="container">
		<tech-nav-bar title="工作台" :currentPage="'/pages/technician/home'">
			<template #center>
				<view class="nav-center">
					<image src="/static/icon/VIP_vip.svg" class="small-icon"></image>
					<view class="worker-id">工号 {{ memberNo }}</view>
				</view>
			</template>
		</tech-nav-bar>
		<view class="unread-notice-bar" v-if="unreadNotices.length > 0" @tap="showUnreadNotices">
			<view class="notice-icon">
				<image src="/static/icons/notice.png" class="icon-image"></image>
			</view>
			<view class="notice-content">
				<text class="text-black">您有 {{ unreadNotices.length }} 条新订单待处理</text>
			</view>
			<view class="notice-action">
				<button class="cu-btn bg-blue shadow sm">查看</button>
			</view>
		</view>
		<view class="bg-gradual-blue">
			<view class="main-functions padding">
				<view class="function-item" @tap="goToProfile">
					<view class="icon-wrapper bg-white shadow-blur">
						<image src="/static/tabbar/myinfo.png" class="icon-image text-blue"></image>
					</view>
					<text class="text">个人信息</text>
				</view>
				<view class="function-item" @tap="scanQRCode">
					<view class="icon-wrapper bg-white shadow-blur">
						<image src="/static/icon/扫码_scan-code.svg" class="icon-image text-yellow"></image>
					</view>
					<text class="text">扫码验票</text>
				</view>
				<view class="function-item" @tap="() => {
					$refs.popup.open()
					couponCode = null
				}">
					<view class="icon-wrapper bg-white shadow-blur">
						<image src="/static/icon/扫码_scan-code.svg" class="icon-image text-yellow"></image>
					</view>
					<text class="text">券码验票</text>
				</view>
			</view>
			<view class="pay-attention-to" v-if="isIOS">
				<text>因iOS系统兼容性问题，可能会有扫码失败的情况，扫码前需要点击右上角“···”，选择刷新</text>
			</view>
		</view>
		<view class="service-calendar">
			<view class="calendar-header solid-bottom padding-bottom-sm">
				<image src="/static/tabbar/dates.png" class="calendar-icon"></image>
				<text class="calendar-title text-bold">服务日历</text>
			</view>
			<scroll-view scroll-x="true" class="calendar-scroll padding-top-sm">
				<view class="calendar-items">
					<view class="calendar-item" v-for="(dateItem, index) in serviceDates" :key="index"
						@tap="viewDateOrders(dateItem)" :class="{ 'active': dateItem.serviceCount > 0 }">
						<view class="date">{{ formatCalendarDate(dateItem) }}</view>
						<view class="service-count">
							待服务:{{ dateItem.serviceCount }}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="calendar-empty" v-if="!hasServiceOrders">
				暂时没有需要服务的订单~
			</view>
		</view>
		<view class="bottom-functions bg-white radius shadow margin-lr margin-tb-sm padding">
			<view class="cu-list grid col-3 no-border">
				<view class="cu-item" @tap="goToWallet">
					<view class="icon-wrapper">
						<image src="/static/tabbar/income.png" class="icon-image text-orange"></image>
					</view>
					<text>收入提现</text>
				</view>
				<view class="cu-item" @tap="goToSettlement">
					<view class="icon-wrapper">
						<image src="/static/tabbar/order.png" class="icon-image text-green"></image>
					</view>
					<text>订单结算</text>
				</view>
				<view class="cu-item" @tap="goToDrive">
					<view class="icon-wrapper">
						<image src="/static/tabbar/drive.png" class="icon-image text-mauve"></image>
					</view>
					<text>企业导航</text>
				</view>
				<view class="cu-item" @tap="goToSupplies">
					<view class="icon-wrapper">
						<image src="/static/tabbar/supplies.png" class="icon-image text-red"></image>
					</view>
					<text>物料商城</text>
				</view>
				<view class="cu-item" @tap="goToService">
					<view class="icon-wrapper">
						<image src="/static/tabbar/call.png" class="icon-image text-cyan"></image>
					</view>
					<text>平台客服</text>
				</view>
			</view>
		</view>
		<view class="notice-popup" v-if="showNoticePopup">
			<view class="notice-popup-mask" @tap="closeNoticePopup"></view>
			<view class="notice-popup-content">
				<view class="notice-popup-header">
					<text class="notice-popup-title">未读通知</text>
					<text class="notice-popup-close" @tap="closeNoticePopup">×</text>
				</view>
				<scroll-view scroll-y="true" class="notice-popup-body">
					<view class="notice-list">
						<view class="notice-item" v-for="(notice, index) in unreadNotices" :key="index"
							@tap="viewNoticeDetail(notice)">
							<view class="notice-item-title">{{ notice.title }}</view>
							<view class="notice-item-time">{{ formatDate(notice.createTime) }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="service-popup" v-if="showServicePopup">
			<view class="popup-mask" @tap="closeServicePopup"></view>
			<view class="popup-content">
				<view class="phone-info">{{ servicePhone }}可能是一个电话号码，你可以</view>
				<view class="action-list">
					<view class="action-item" @tap="makePhoneCall">呼叫</view>
					<view class="action-item" @tap="copyPhoneNumber">复制号码</view>
					<view class="action-item" @tap="addToContacts">添加到手机通讯录</view>
					<view class="action-item cancel" @tap="closeServicePopup">取消</view>
				</view>
			</view>
		</view>
		<uni-popup type="center" ref="popup">
			<view style="background-color: #fff;width: 95vw;height: 10vh;">
				<input style="height: 60%;font-size: 200%;" v-model="couponCode" placeholder="请输入券码" />
				<button type="primary" @tap="() => {
					orderNo = couponCode
					getOrderByOrderNo(couponCode);
				}">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import TechNavBar from '@/components/tech-nav-bar.vue'
import jweixin from 'jweixin-module'

export default {
		components: {
			TechNavBar
		},
		data() {
			return {
				couponCode: null,
				couponCodeVerificationShow: false,
				unreadCount: 1,
				memberNo: '',
				techId: '',
				userInfo: {
					isOnline: true,
					isPriority: true
				},
				serviceDates: [],
				upcomingOrders: [],
				isJssdkInitialized: false,
				orderNo: '',
				unreadNotices: [],
				showNoticePopup: false,
				showServicePopup: false,
				servicePhone: '',
				isIOS: false
			}
		},
		computed: {
			hasServiceOrders() {
				return this.serviceDates.some(date => date.serviceCount > 0);
			}
		},
		onShow() {
			this.isIos = uni.getSystemInfoSync().platform === 'ios'
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.memberNo = userInfo.memberNo || ''
				this.techId = userInfo.techId || ''
				// 加载服务日历数据
				this.loadServiceCalendar()
				// 加载未读通知
				this.loadUnreadNotices()
				// 初始化JSSDK
				this.initJssdkConfig()
				// 获取客服电话
				this.getServicePhone()
			}
		},
		methods: {
			// 初始化JSSDK配置
			initJssdkConfig() {
				// 获取当前页面URL（去除hash部分）
				const url = window.location.href.split('#')[0];

				// 请求后端获取签名配置
				uni.request({
					url: `${uni.$config.baseUrl}/wx/jssdk/config`,
					method: 'GET',
					data: {
						url: url
					},
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data && res.data.code === 200) {
							const config = res.data.data;
							this.configJweixin(config);
						} else {
							uni.showToast({
								title: res.data?.msg || '获取配置失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {}
				});
			},
			configJweixin(config) {
				jweixin.config({
					debug: false, // 开启调试模式
					appId: config.appId, // 必填，公众号的唯一标识
					timestamp: config.timestamp, // 必填，生成签名的时间戳
					nonceStr: config.nonceStr, // 必填，生成签名的随机串
					signature: config.signature, // 必填，签名
					jsApiList: [
						'updateAppMessageShareData', // 分享给朋友
						'updateTimelineShareData', // 分享到朋友圈
						'showOptionMenu', // 显示右上角菜单
						'hideOptionMenu', // 隐藏右上角菜单
						'onMenuShareAppMessage', // 分享给朋友（旧接口）
						'onMenuShareTimeline', // 分享到朋友圈（旧接口）
						'scanQRCode', // 扫一扫接口
						'openCustomerServiceChat' // 打开客服会话
					] // 必填，需要使用的JS接口列表
				});
				jweixin.ready(() => {
					console.log('jweixin配置成功');
					this.isJssdkInitialized = true;

					// 设置分享信息
					this.setShareInfo();
				});

				// 配置失败回调
				jweixin.error((err) => {
					console.error('jweixin配置失败:', err);
					// uni.showToast({
					//   title: '微信配置失败',
					//   icon: 'none'
					// });
				});
			},

			// 设置分享信息
			setShareInfo() {
				// 分享给朋友
				jweixin.updateAppMessageShareData({
					title: '邀请您加入我们的技师平台',
					desc: '加入我们的技师平台，享受更多专业服务',
					link: window.location.href,
					imgUrl: '/static/tabbar/share.png',
					success: function() {
						console.log('分享成功');
					},
					fail: function(err) {
						console.error('分享失败:', err);
					}
				});

				// 分享到朋友圈
				jweixin.updateTimelineShareData({
					title: '邀请您加入我们的技师平台',
					link: window.location.href,
					imgUrl: '/static/tabbar/share.png',
					success: function() {
						console.log('分享成功');
					},
					fail: function(err) {
						console.error('分享失败:', err);
					}
				});

				// 兼容旧版本
				jweixin.onMenuShareAppMessage({
					title: '邀请您加入我们的技师平台',
					desc: '加入我们的技师平台，享受更多专业服务',
					link: window.location.href,
					imgUrl: '/static/tabbar/share.png',
					success: function() {
						console.log('分享成功');
					},
					fail: function(err) {
						console.error('分享失败:', err);
					}
				});

				jweixin.onMenuShareTimeline({
					title: '邀请您加入我们的技师平台',
					link: window.location.href,
					imgUrl: '/static/tabbar/share.png',
					success: function() {
						console.log('分享成功');
					},
					fail: function(err) {
						console.error('分享失败:', err);
					}
				});
			},

			// 获取服务日历数据
			loadServiceCalendar() {
				if (!this.techId) {
					console.error('技师ID不存在')
					return
				}

				uni.showLoading({
					title: '加载中...'
				})

				// 获取今天和未来14天的日期
				const dates = this.generateDateList(15) // 今天 + 14天

				console.log('请求参数:', {
					technicianId: this.techId,
					techId: this.techId,
					orderStatus: 1,
					status: 1,
					isDelete: 0
				})

				// 调用API获取技师的待服务订单
				uni.request({
					url: `${uni.$config.baseUrl}/orders/orders/listAll`,
					method: 'GET',
					data: {
						technicianId: this.techId,
						techId: this.techId, // 添加备用字段名
						orderStatus: 1, // 明确指定订单状态
						status: 1, // 保留原有参数
						isDelete: 0 // 明确指定非删除
					},
					success: (res) => {
						console.log('待服务订单响应:', res.data)

						if (res.statusCode === 200 && res.data.code === 200) {
							const orders = res.data.rows || []
							console.log('获取到的订单数量:', orders.length)
							console.log('订单详情:', orders)

							this.upcomingOrders = orders

							// 统计每个日期的订单数量
							this.serviceDates = dates.map(date => {
								const dateStr = date.dateValue
								const count = orders.filter(order => {
									// 检查多种可能的日期字段
									const orderDate = order.appointmentDate || order
										.serviceDate || order.orderDate
									// console.log(
									// 	`检查订单 ${order.id || order.orderNo}: 预约日期=${orderDate}, 目标日期=${dateStr}`
									// )
									return orderDate === dateStr
								}).length

								//console.log(`日期 ${dateStr} 的待服务订单数量: ${count}`)

								return {
									dateValue: dateStr,
									dateText: date.dateText,
									weekday: date.weekday,
									serviceCount: count
								}
							})

							//console.log('最终服务日历数据:', this.serviceDates)
						} else {
							//console.error('获取订单列表失败:', res.data.msg)
							// 使用空数据初始化日期列表
							this.serviceDates = dates.map(date => ({
								dateValue: date.dateValue,
								dateText: date.dateText,
								weekday: date.weekday,
								serviceCount: 0
							}))
						}
					},
					fail: (err) => {
						console.error('请求失败:', err)
						// 使用空数据初始化日期列表
						this.serviceDates = dates.map(date => ({
							dateValue: date.dateValue,
							dateText: date.dateText,
							weekday: date.weekday,
							serviceCount: 0
						}))
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},

			// 加载未读通知
			loadUnreadNotices() {
				if (!this.techId) {
					console.error('技师ID不存在，无法获取未读通知')
					return
				}

				uni.request({
					url: `${uni.$config.baseUrl}/noticerecord/noticerecord/unread/${this.techId}`,
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data && res.data.code === 200) {
							this.unreadNotices = res.data.data || []
							console.log('获取到未读通知数量:', this.unreadNotices.length)
						} else {
							console.error('获取未读通知失败:', res.data?.msg || '未知错误')
						}
					},
					fail: (err) => {
						console.error('获取未读通知请求失败:', err)
					}
				})
			},

			// 显示未读通知弹窗
			showUnreadNotices() {
				this.showNoticePopup = true
			},

			// 关闭未读通知弹窗
			closeNoticePopup() {
				this.showNoticePopup = false
			},

			// 查看通知详情
			viewNoticeDetail(notice) {
				// 更新通知为已读状态
				this.updateNoticeReadStatus(notice.noticeId)

				// 关闭弹窗
				this.closeNoticePopup()

				// 跳转到通知详情页
				uni.navigateTo({
					url: `/pages/technician/message-detail?id=${notice.noticeId}`
				})
			},

			// 更新通知为已读状态
			updateNoticeReadStatus(noticeId) {
				if (!this.techId || !noticeId) {
					console.error('技师ID或通知ID不存在，无法更新通知状态')
					return
				}

				uni.request({
					url: `${uni.$config.baseUrl}/noticerecord/noticerecord/updateReadStatus/${this.techId}/${noticeId}`,
					method: 'PUT',
					success: (res) => {
						if (res.statusCode === 200 && res.data && res.data.code === 200) {
							console.log('通知已标记为已读')
							// 从未读列表中移除该通知
							this.unreadNotices = this.unreadNotices.filter(notice => notice.noticeId !==
								noticeId)
						} else {
							console.error('更新通知状态失败:', res.data?.msg || '未知错误')
						}
					},
					fail: (err) => {
						console.error('更新通知状态请求失败:', err)
					}
				})
			},

			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return ''

				const date = new Date(dateString)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')

				return `${year}-${month}-${day} ${hours}:${minutes}`
			},

			// 添加新方法来格式化日历日期
			formatCalendarDate(dateItem) {
				// 如果是今天，显示为"04月03日今天周二"格式
				if (dateItem.isToday) {
					const month = dateItem.dateValue.substring(5, 7);
					const day = dateItem.dateValue.substring(8, 10);
					return `${month}月${day}日今天${dateItem.weekday}`;
				}
				// 如果不是今天，显示为"04月02日 今天周三"格式
				else {
					const month = dateItem.dateValue.substring(5, 7);
					const day = dateItem.dateValue.substring(8, 10);
					return `${month}月${day}日 ${dateItem.weekday}`;
				}
			},

			// 生成日期列表
			generateDateList(days) {
				const dateList = []
				const today = new Date()
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

				for (let i = 0; i < days; i++) {
					const date = new Date(today)
					date.setDate(today.getDate() + i)

					const year = date.getFullYear()
					const month = date.getMonth() + 1
					const day = date.getDate()
					const weekday = weekdays[date.getDay()]

					// 日期格式: 2023-05-01
					const dateValue = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`

					// 标记是否为今天
					const isToday = i === 0;
					// 标记是否为明天
					const isTomorrow = i === 1;

					dateList.push({
						dateValue,
						weekday,
						isToday,
						isTomorrow
					})
				}

				return dateList
			},

			// 查看某日订单
			viewDateOrders(dateItem) {
				if (dateItem.serviceCount > 0) {
					uni.navigateTo({
						url: `/pages/technician/order?date=${dateItem.dateValue}&status=1`
					})
				} else {
					uni.showToast({
						title: '当日无待服务订单',
						icon: 'none'
					})
				}
			},

			goToProfile() {
				uni.navigateTo({
					url: '/pages/technician/profile'
				})
			},
			goToShop() {
				uni.navigateTo({
					url: '/pages/technician/shop'
				})
			},
			goToVerify() {
				uni.navigateTo({
					url: '/pages/technician/verify'
				})
			},
			goToInvite() {
				// 检查JSSDK是否已初始化
				if (this.isJssdkInitialized) {
					// 显示微信原生的分享菜单
					uni.showToast({
						title: '显示微信原生的分享菜单',
						icon: 'none'
					});
					jweixin.showOptionMenu();

					// 设置分享信息
					jweixin.updateAppMessageShareData({
						title: '邀请您加入我们的技师平台',
						desc: '加入我们的技师平台，享受更多专业服务',
						link: window.location.href,
						imgUrl: '/static/tabbar/share.png',
						success: function() {},
						fail: function(err) {}
					});

					// 设置分享到朋友圈
					jweixin.updateTimelineShareData({
						title: '邀请您加入我们的技师平台',
						link: window.location.href,
						imgUrl: '/static/tabbar/share.png',
						success: function() {},
						fail: function(err) {}
					});
				} else {
					// 非微信环境或JSSDK未初始化
					uni.showToast({
						title: '请在微信中打开',
						icon: 'none'
					});
				}
			},
			goToSchedule() {
				uni.switchTab({
					url: '/pages/technician/time'
				})
			},
			goToOrder() {
				uni.switchTab({
					url: '/pages/technician/order'
				})
			},
			goToMessage() {
				uni.switchTab({
					url: '/pages/technician/message'
				})
			},
			goToMine() {
				uni.switchTab({
					url: '/pages/technician/my'
				})
			},
			goToWallet() {
				uni.navigateTo({
					url: '/pages/technician/wallet'
				})
			},
			goToSettlement() {
				uni.navigateTo({
					url: '/pages/technician/settlement'
				})
			},
			goToStats() {
				uni.navigateTo({
					url: '/pages/technician/stats'
				})
			},
			goToTraining() {
				uni.navigateTo({
					url: '/pages/technician/training'
				})
			},
			goToDrive() {
				uni.navigateTo({
					url: '/pages/technician/drive'
				})
			},
			goToSupplies() {
				uni.navigateTo({
					url: '/pages/technician/supplies'
				})
			},
			goToService() {
				this.showServicePopup = true;
			},
			// 获取客服电话
			// 获取客服电话
			getServicePhone() {
				uni.request({
					url: `${uni.$config.baseUrl}/system/config/configKey/CustomerServicePhone`,
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {
							this.servicePhone = res.data.msg || '' // 如果获取失败，使用默认值
						} else {
							this.servicePhone = '18655195062' // 使用默认值
						}
					},
					fail: (err) => {
						this.servicePhone = '18655195062' // 使用默认值
					}
				})
			},
			// 显示客服弹窗
			closeServicePopup() {
				this.showServicePopup = false;
			},
			// 拨打电话
			makePhoneCall() {
				if (this.servicePhone) {
					uni.makePhoneCall({
						phoneNumber: this.servicePhone,
						success: () => {},
						fail: (err) => {
							uni.showToast({
								title: '拨打电话失败',
								icon: 'none'
							});
						}
					});
				}
			},
			// 复制电话号码
			copyPhoneNumber() {
				if (this.servicePhone) {
					uni.setClipboardData({
						data: this.servicePhone,
						success: () => {
							uni.showToast({
								title: '复制成功',
								icon: 'success'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '复制失败',
								icon: 'none'
							});
						}
					});
				}
			},
			// 添加到通讯录
			addToContacts() {
				if (this.servicePhone) {
					uni.addPhoneContact({
						phoneNumber: this.servicePhone,
						success: () => {},
						fail: (err) => {
							uni.showToast({
								title: '添加联系人失败',
								icon: 'none'
							});
						}
					});
				}
			},
			// 扫码验票
			scanQRCode() {
				// 检查JSSDK是否已初始化
				if (this.isJssdkInitialized) {
					// 使用jweixin的扫码接口
					jweixin.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: (res) => {
							// 处理扫码结果
							if (res.resultStr) {
								// 获取订单信息
								this.orderNo = res.resultStr;
								this.getOrderByOrderNo(res.resultStr);
							}
						},
						fail: (err) => {
							uni.showToast({
								title: JSON.stringify(err),
								icon: 'none'
							});
						}
					});
				} else {
					// JSSDK未初始化
					uni.showToast({
						title: '请在微信中打开',
						icon: 'none'
					});
				}
			},
			// 根据订单号获取订单信息
			async getOrderByOrderNo(orderNo) {

				try {
					uni.showLoading({
						title: '获取订单信息...'
					});

					const res = await uni.request({
						/*        url: `${uni.$config.baseUrl}/orders/orders/getByOrderNo/${orderNo}`,
						          method: 'GET',
						          data: {
						            technicianId: this.techId // 添加技师ID参数
						          } */
						url: `${uni.$config.baseUrl}/orders/orders/getByOrderNo/${orderNo}?technicianId=${this.techId}`,
						method: 'GET'
					});

					uni.hideLoading();

					if (res.data.code === 200) {
						const orderInfo = res.data.data;
						// 显示订单信息并询问是否开始服务
						this.showOrderInfoAndConfirm(orderInfo);
					} else {
						uni.showToast({
							title: res.data.msg || '获取订单信息失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.hideLoading();
					console.error('获取订单信息失败:', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			},
			// 显示订单信息并确认是否开始服务
			showOrderInfoAndConfirm(orderInfo) {
				// 格式化订单信息
				const orderStatusText = this.getOrderStatusText(orderInfo.orderStatus);
				const appointmentTime = orderInfo.appointmentDate + ' ' + orderInfo.appointmentTime;

				// 构建订单信息内容
				const content = `
					订单号: ${orderInfo.orderNo}
					服务项目: ${orderInfo.serviceName}
					预约时间: ${appointmentTime}
					订单状态: ${orderStatusText}
					客户姓名: ${orderInfo.customerName || '未知'}
				  `;

				uni.showModal({
					title: '订单信息',
					content: content,
					confirmText: '开始服务',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了"开始服务"按钮
							this.startService(orderInfo.orderNo);
						}
					}
				});
			},
			// 获取订单状态文本
			getOrderStatusText(status) {
				const statusMap = {
					'0': '待接单',
					'1': '待服务',
					'2': '服务中',
					'3': '已完成',
					'4': '已取消',
					'5': '已退款',
					'6': '任务池'
				};
				return statusMap[status] || '未知状态';
			},
			// 开始服务
			startService(orderNo) {
				uni.showModal({
					title: '开始服务',
					content: '是否确认开始服务？',
					success: async (res) => {
						if (res.confirm) {
							try {
								const result = await uni.request({
									url: `${uni.$config.baseUrl}/orders/orders`,
									method: 'PUT',
									data: {
										orderNo: orderNo,
										orderStatus: 2, // 更新状态为服务中
										technicianId: this.techId
									}
								});

								if (result.statusCode === 200 && result.data.code === 200) {
									uni.showToast({
										title: '服务已开始',
										icon: 'success'
									});
									uni.navigateTo({
										url: `/pages/technician/order`
									});
								} else {
									uni.showToast({
										title: result.data.msg || '操作失败',
										icon: 'none'
									});
								}
							} catch (err) {
								console.error('开始服务请求失败:', err);
								uni.showToast({
									title: '网络请求失败',
									icon: 'none'
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-attention-to {
		font-size: 90%;
		padding: 3%;
	}

	.container {
		padding: 0 0 100rpx;
		/* Reduced top padding since status bar was removed */
		min-height: 100vh;
		background: #f9fafb;
	}

	.status-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 30rpx;
		z-index: 100;
		background: linear-gradient(90deg, #3B96FF, #2B85E4);

		.status-left {
			.online-status {
				display: flex;
				align-items: center;
				padding: 4rpx 16rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 30rpx;
			}
		}

		.status-right {
			display: flex;
			align-items: center;

			.small-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
				filter: brightness(0) invert(1);
			}

			.worker-id {
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}
	}

	.nav-center {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 0 30rpx;

		.small-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
			filter: brightness(0) invert(1);
		}

		.worker-id {
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}

	.unread-notice-bar {
		position: fixed;
		top: 0rpx;
		left: 30rpx;
		right: 30rpx;
		z-index: 99;
		display: flex;
		align-items: center;
		background: #E1EEFF;
		padding: 26rpx;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		border-left: 6rpx solid #2B87FF;
		animation: slideIn 0.3s ease-out forwards;

		.notice-icon {
			margin-right: 20rpx;

			.icon-image {
				width: 48rpx;
				height: 48rpx;
				filter: invert(45%) sepia(66%) saturate(2848%) hue-rotate(198deg) brightness(98%) contrast(101%);
			}
		}

		.notice-content {
			flex: 1;
			font-size: 30rpx;
		}

		.notice-action {
			.cu-btn {
				background: #2B87FF;
				padding: 10rpx 28rpx;
				border-radius: 30rpx;
				box-shadow: 0 4rpx 8rpx rgba(43, 135, 255, 0.2);
				font-size: 26rpx;

				&:active {
					transform: scale(0.96);
				}
			}
		}
	}

	@keyframes slideIn {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.main-functions {
		display: flex;
		justify-content: space-around;
		border-radius: 0 0 30rpx 30rpx;
		padding: 100rpx 30rpx 0;
		box-shadow: 0 10rpx 30rpx rgba(59, 150, 255, 0.1);

		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon-wrapper {
				width: 140rpx;
				height: 140rpx;
				border-radius: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				box-shadow: 0 8rpx 20rpx rgba(59, 150, 255, 0.15);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
				}

				.icon-image {
					width: 64rpx;
					height: 64rpx;
					color: #2B87FF !important;
					filter: invert(45%) sepia(66%) saturate(2848%) hue-rotate(198deg) brightness(98%) contrast(101%);
				}
			}

			.text {
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}

	.notice-bar,
	.system-notice {
		display: flex;
		align-items: center;

		.notice-icon {
			margin-right: 20rpx;

			.icon-image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.notice-content,
		.notice-text {
			flex: 1;
			font-size: 28rpx;
		}
	}

	.service-calendar {
		background: white;
		border-radius: 20rpx;
		margin: 20rpx 30rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);

		.calendar-header {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;
			padding-bottom: 28rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.calendar-icon {
				width: 46rpx;
				height: 46rpx;
				margin-right: 16rpx;
				filter: invert(45%) sepia(66%) saturate(2848%) hue-rotate(198deg) brightness(98%) contrast(101%);
			}

			.calendar-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.calendar-scroll {
			white-space: nowrap;
			width: 100%;
			padding: 24rpx 0;
		}

		.calendar-items {
			display: inline-flex;
		}

		.calendar-item {
			flex: 0 0 auto;
			min-width: 220rpx;
			background: #F0F7FF;
			padding: 25rpx;
			border-radius: 16rpx;
			text-align: center;
			transition: all 0.3s ease;
			margin-right: 24rpx;
			margin-top: 10rpx;
			border: 2rpx solid transparent;

			&:last-child {
				margin-right: 10rpx;
			}

			&.active {
				background: #E1EEFF;
				border: 2rpx solid #2B87FF;
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 16rpx rgba(43, 135, 255, 0.15);
			}

			.date {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 16rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
			}

			.service-count {
				font-size: 30rpx;
				color: #2B87FF;
				font-weight: bold;
			}
		}

		.calendar-empty {
			text-align: center;
			color: #999;
			font-size: 32rpx;
			padding: 40rpx 0;
		}
	}

	.swiper-container {
		margin: 20rpx 30rpx;
		padding: 20rpx 0;
		background: white;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: center;
		align-items: center;

		.swiper {
			height: 400rpx;
			width: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;

			.swiper-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.bottom-functions {
		margin: 20rpx 30rpx 40rpx;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);

		.cu-list.grid {
			.cu-item {
				padding: 25rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: all 0.2s ease;

				&:active {
					opacity: 0.8;
				}

				.icon-wrapper {
					width: 110rpx;
					height: 110rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;
					background: rgba(43, 135, 255, 0.08);
					border-radius: 50%;
				}

				.icon-image {
					width: 56rpx;
					height: 56rpx;
					filter: invert(45%) sepia(66%) saturate(2848%) hue-rotate(198deg) brightness(98%) contrast(101%);
				}

				text {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
	}

	.notice-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;

		.notice-popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
		}

		.notice-popup-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 85%;
			max-height: 70vh;
			background: #FFFFFF;
			border-radius: 24rpx;
			overflow: hidden;
			box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.15);

			.notice-popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 36rpx;
				border-bottom: 1rpx solid #EEEEEE;
				background: #F0F7FF;

				.notice-popup-title {
					font-size: 38rpx;
					font-weight: bold;
					color: #2B87FF;
				}

				.notice-popup-close {
					font-size: 46rpx;
					color: #2B87FF;
					padding: 0 20rpx;
					line-height: 1;
				}
			}

			.notice-popup-body {
				max-height: 60vh;

				.notice-list {
					padding: 25rpx;

					.notice-item {
						padding: 28rpx;

						.notice-item-title {
							font-size: 34rpx;
							color: #333;
							margin-bottom: 16rpx;
							font-weight: 500;
						}

						.notice-item-time {
							font-size: 28rpx;
							color: #2B87FF;
						}
					}
				}
			}
		}
	}

	.service-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
		}

		.popup-content {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;
			box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.15);

			.phone-info {
				padding: 45rpx 30rpx;
				font-size: 36rpx;
				color: #333;
				text-align: center;
				border-bottom: 1rpx solid #F5F5F5;
				font-weight: 500;
			}

			.action-list {
				display: flex;
				flex-direction: column;
				padding: 35rpx;

				.action-item {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 34rpx;
					color: #2B87FF;
					background: #F0F7FF;
					border-radius: 50rpx;
					margin-bottom: 24rpx;
					font-weight: 500;
					transition: all 0.2s;

					&:active {
						background: #E1EEFF;
						transform: scale(0.98);
					}

					&:last-child {
						margin-bottom: 0;
					}

					&.cancel {
						background: #F5F5F5;
						color: #999;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>